<script lang="ts" setup>
import { OrderList, OrderStatus, PatientList } from '@/api/type/user';
import { getOrderListAPI, getOrderStatusAPI, getPatientListAPI } from '@/api/user';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()

const gotoDetail=(orderId:number)=>{
router.push(`/user/order/show?orderId=${orderId}`)
}

//获取订单分页列表
const orderList=ref<OrderList>()
const patientId=ref<string>('')
const orderStatus=ref<string>('')
const orderParam=ref({
  page:1,
  limit:10
})

const getOrderList=async()=>{
  const res=await getOrderListAPI(orderParam.value.page,orderParam.value.limit,patientId.value,orderStatus.value)
  orderList.value=res.data
}
const serachOrder=()=>{
  getOrderList()
}
getOrderList()
//获取订单状态 就诊人
const StatusList=ref<OrderStatus>([])
const patientList=ref<PatientList>([])
const getData = async()=>{
  const res=await getOrderStatusAPI()
  const result= await getPatientListAPI()
  patientList.value=result.data
  StatusList.value=res.data
}
getData()
</script>

<template>
  <div class="order">
    <div class="title"> 挂号订单</div>
    <el-form :inline="true" >
      <el-form-item label="就诊人:" >
        <el-select v-model="patientId"  placeholder="请选择就诊人" clearable size="small" style="width: 200px">
        <el-option  v-for="item in patientList" :key="item.id" :label="item.name +[item.certificatesNo]" 
         :value="item.id" />
      </el-select>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-select  v-model="orderStatus"  placeholder="全部"  clearable size="small"  style="width: 200px">
        <el-option v-for="item in StatusList" :key="item.status" :label="item.comment" :value="item.status" />
      </el-select>
      <el-button link type="primary" @click="serachOrder">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="orderList?.records" stripe style="width: 100%" :header-cell-style="{fontSize: '12px', backgroundColor: '#e8f2ff',color:'#666'}">
    <el-table-column prop="createTime" label="就诊时间" width="200" />
    <el-table-column prop="hosname" label="医院" width="110" />
    <el-table-column prop="depname" label="科室" width="150" />
    <el-table-column prop="title" label="医生" width="120" />
    <el-table-column prop="amount" label="医事服务费" width="120" />
    <el-table-column prop="patientName" label="就诊人" width="120" />
    <el-table-column prop="param.orderStatusString" label="订单状态" width="150" />
    <el-table-column  label="操作">
      <template v-slot="{row}">
        <el-button @click="gotoDetail(row.id)" link type="primary">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row style="height:60px;margin-top: 30px;padding: 2px 5px;" type="flex" justify="center" align="middle">
    <el-col :span="12">
      <el-pagination @current-change="getOrderList" v-model:current-page="orderParam.page" layout="prev, pager, next" :total="orderList?.total" />
    </el-col>
  </el-row>

  </div>
</template>

<style lang="scss" scoped>
.order {
  .title {
    color: #333;
    font-weight: 700;
  }
}
</style>